<script setup lang="ts">

const {waterForm} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
}>();

// let options = {
//   container: "luckySheetB", //luckysheet为容器id
//   lang: 'zh',
//   autoCalculate: true,
//   data: [
//     {
//       "row": 9,
//       "celldata": [
//         // 初始化表格数据，第一行包含表头
//         {"r": 0, "c": 0, "v": "样品编号",}, // A1
//         {"r": 0, "c": 1, "v": "取样量",}, // B1
//         {"r": 0, "c": 2, "v": "待测物",}, // B1
//         {"r": 0, "c": 3, "v": "检出限(     )",}, // B1
//         {"r": 0, "c": 4, "v": "试样含量ρ (     )",}, // B1
//         {"r": 0, "c": 5, "v": "样品含量ω(     )",}, // B1
//         {"r": 0, "c": 6, "v": "备注",}, // B1
//
//       ], // 初始化数据
//       "config": {
//         "merge": {}, // 合并单元格
//         "columnlen": { // 设置列宽
//           "0": 130, // 第一列宽度 150px
//           "1": 130, // 第二列宽度 120px
//           "2": 130, // 第三列宽度 180px
//           "3": 130, // 第四列宽度 100px
//           "4": 100, // 第五列宽度 200px
//           "5": 100,  // 第六列宽度 150px
//           "6": 100,  // 第六列宽度 150px
//           "7": 100,  // 第六列宽度 150px
//           "8": 100,  // 第六列宽度 150px
//           "9": 100,  // 第六列宽度 150px
//         }, // 表格列宽
//       },
//     }
//   ],
//   showinfobar: false, // 隐藏信息栏
//   showtoolbar: false, // 隐藏工具栏
// };
// onMounted(() => {
//   luckysheet.create(options);
// })
</script>

<template>
  <el-card class="box-card">
    <div style="text-align: center;display: flex;align-items: center;justify-content: space-between">
      <div></div>
      <h1> 固体废物/固废浸出液 气相色谱质谱法分析原始记录（B面）</h1>
      <div></div>
    </div>
    <div style="display: flex;justify-content: space-between">
      <p style="margin: 0">SXLPHJ/JL/CX-22-128</p>
      <div style="display: flex;align-items: center;">
        <span style="width: 140px;">配置日期：</span>
        <el-input style="border: 1px solid #ccc;border-radius: 6px" placeholder="请输入"
                  v-model="waterForm.pzrq"></el-input>
      </div>
    </div>
    <table class="table" style="width: 200%;">
      <tr>
        <td colspan="9">
          溶液配制
        </td>
      </tr>
      <tr>
        <td>序号</td>
        <td>标准贮备液编号</td>
        <td>有效期</td>
        <td>移取贮备液体积(μL)</td>
        <td>使用液浓度()</td>
        <td>定容体积(mL)</td>
      </tr>
      <tr v-for="(item,index) in waterForm.rypz" :key="index">
        <td>{{ index + 1 }}</td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.ry_bzzbybh"></el-input>
        </td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.ry_yxq"></el-input>
        </td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.ry_yqzbytj"></el-input>
        </td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.ry_syynd"></el-input>
        </td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.ry_dztj"></el-input>
        </td>
      </tr>
    </table>
    <table class="table" style="width: 200%;">
      <tr>
        <td colspan="9">
          校准曲线配制
        </td>
      </tr>
      <tr>
        <td>序号</td>
        <td>待测物使用液加入量(μL)</td>
        <td>替代物使用液加入量(μL)</td>
        <td>内标使用液加入量(μL)</td>
        <td>定容体积(mL)</td>
        <td>曲线浓度（μg/mL）</td>
      </tr>
      <tr v-for="(item,index) in waterForm.jzqxpz" :key="index">
        <td>{{ index + 1 }}</td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.jz_dcwsyyjrl"></el-input>
        </td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.jz_tdwsyyjrl"></el-input>
        </td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.jz_nbsyyjrl"></el-input>
        </td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.jz_dztj"></el-input>
        </td>
        <td>
          <el-input placeholder="请输入"
                    v-model="item.jz_qxsd"></el-input>
        </td>
      </tr>
    </table>
    <div id="luckySheetB" style="width:100%;height:500px;"></div>
  </el-card>
</template>

<style scoped lang="scss">
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* 表格边框合并 */
  text-align: left;
  /* 默认左对齐 */
  font-size: 14px;
  /* 字体大小 */
  color: #606266;
  /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf;
  /* 表格单元格边框颜色 */
  padding: 12px;
  /* 单元格内边距 */
  text-align: center;
}

.table th {
  background: #f5f7fa;
  /* 表头背景色 */
  font-weight: 600;
  /* 表头字体加粗 */
  color: #303133;
  /* 表头字体颜色 */
  text-align: center;
  /* 表头居中 */
}


.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
